<template>
	<view class="">
		<u-sticky bgColor="#fff" offsetTop="-88rpx">
			<u-tabs :list="tabarr" :scrollable="false" @change="selectTab"></u-tabs>
		</u-sticky>
		<view class="p-30">
			<view class="flex-column" style="gap: 30rpx;" v-if="!noData">
				<view class="card p-30" v-for="(item,index) in list" :key="index">
					<view class="flex-row justify-between align-center">
						<view class="gray-color">
							订单编号：{{item.order_sn}}
						</view>
						<view class="">
							<template v-if="item.status == 0">
								<u-text type="error" text="未支付"></u-text>
							</template>
							<template v-else-if="item.status == 1">
								<u-text type="primary" text="已支付"></u-text>
							</template>
							<template v-else-if="item.status == 2">
								<u-text type="success" text="已确认"></u-text>
							</template>
							<template v-else-if="item.status == 3">
								<u-text type="info" text="已完成"></u-text>
							</template>
						</view>
					</view>
					<u-line color="#eee" margin="30rpx 0"></u-line>
					<view class="flex-row">
						<u-image :src="item.image" width="150rpx" height="150rpx"></u-image>
						<view class="flex-column justify-center w-full ml-30" style="gap: 10rpx;">
							<view class="flex-row align-center justify-between" style="gap: 10rpx;">
								<view class="fw-700">{{item.title}}</view>
								<view class="flex-row">
									<u-text mode="price" :color="$u.color.primary" :text="item.pay_price"></u-text>
								</view>
							</view>
							<view class="flex-row align-center">
								<view class="tag">
									<u-tag text="卖家" size="mini" type="warning"></u-tag>
								</view>
								<view class="ml-10 small-size">{{item.seller_name}}</view>
							</view>
							<view class="flex-row align-center">
								<view class="gray-color small-size">{{$u.timeFormat(item.createtime, 'yyyy年mm月dd日')}}</view>
							</view>
						</view>
					</view>
					<u-line color="#eee" margin="30rpx 0"></u-line>
					<view class="flex-column" style="gap: 10rpx;">
						<view class="flex-row align-center justify-between small-size">
							<view class="">
								消费赠送积分
							</view>
							<view>{{item.profit}}</view>
						</view>
						<view class="flex-row align-center justify-between small-size">
							<view class="">
								技术服务费
							</view>
							<view>{{item.service_fee}}</view>
						</view>
						<view v-if="item.status == 0" @click="jumpPage(`/pages/order/pay?order_id=${item.id}`)" class="flex-row justify-end">
							<view class="">
								<u-button type="primary" size="mini" text="立即支付"></u-button>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore marginTop="60rpx" :status="status" />
			</view>
			<template v-else>
				<u-empty marginTop="120rpx" mode="data">
				</u-empty>
			</template>
		</view>
		<page-tabbar :value="1" />
	</view>
</template>

<script>
	import {orderList} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				tabarr: [
				// 	{
				// 	name: '全部',
				// 	value: -1,
				// }, 
				{
					name: '未支付',
					value: 0,
				}, {
					name: '已支付',
					value: 1,
				}, {
					name: '已确认',
					value: 2,
				}, 
				// {
				// 	name: '已完成',
				// 	value: 3,
				// },
				],

				state: 0,

				status: 'loading',
				list: [],
				noData: false,
				page: 1,
				total: 0,
			}
		},
		computed: {
			...mapState([]),
		},
		onLoad() {
			this.init()
		},
		methods: {
			selectTab(e) {
				this.state = e.value;
				this.init();
			},
			init() {
				this.status = "loading";
				this.list = [];
				this.page = 1;
				this.noData = false;
				this.getList();
			},
			getList() {
				let vm = this;
				let params = {
					'page': this.page,
					'limit': this.$u.config.limit,
					'status': this.state
				};
				orderList({
					params
				}).then(res => {
					if (res.rows.length != 0) {
						this.noData = false;
						this.list = this.list.concat(res.rows);
						this.total = res.total;
						this.page++;
						this.status = vm.page > Math.ceil(vm.total / vm.$u.config.limit) ? 'nomore' : "loadmore"
					} else {
						this.noData = true;
						this.status = "nomore"
					}

				}).catch(err => {
					vm.$refs.uToast.show({
						type: 'error',
						message: err.message,
						complete() {
							vm.loading = false;
						}
					})
				})
			},
			//上拉
			onPullDownRefresh() {
				this.status = "loading"
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//下拉
			onReachBottom() {
				let vm = this;
				this.status = 'loading';
				//延时为了看效果
				setTimeout(() => {
					if (vm.page > Math.ceil(vm.total / this.$u.config.limit)) {
						this.status = 'nomore';
					} else {
						vm.getList();
					}
				}, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>